<template>
  <div class="all">
    <h1 id="name">
      虫情监测预警系统
    </h1>
    <div id="userlogin">
    <div id="title">
        登录
    </div>
    <div class="input">
        <label for="phone" class="prompt">用户名</label><br>
    <input type="tel" id="phone" v-model="username" @keyup.enter="Login">
    </div>
    <div class="input">
        <label for="password" class="prompt">密码</label><br>
    <input type="password" id="password" v-model="password" @keyup.enter="Login">
    </div>
 <van-button type="primary" id="loginbtn" @click="Login">登录</van-button>
    <p id="register">
      <router-link to="" @click="send">注册</router-link>
    </p>
  </div>
  </div>
</template>

<script>
import { login } from '@/api';
import { Notice } from 'view-ui-plus';
export default {
    name:'userlogin',
    emits:['comname'],
    data(){
      return {
        comname:"UserRegister",
        username:null,
        password:null
      }
    },
    components:{
      Notice
    },
    methods:{
      send(){
        this.$emit('comname',this.comname);
    },
    Login(){
      login('/employee/login',{username:this.username,password:this.password}).then((res)=>{
            console.log(res);
            if(res.code==1){
              localStorage.setItem("token",res.data.token);
              this.$router.push('/home');
              Notice.success({
                    title: '登陆成功',
                    deration:1
                });
            }
            else{
              console.log(111);
              this.username=='';
              this.password=='';
              Notice.error({
                    title: '登陆失败',
                    desc:"账号或密码错误！",
                    deration:1
                });
             
            }
        })
    }
    // Login(){
    //   // localStorage.setItem("token","1");
    //   this.$router.push('/home')
    // }
    },
    created(){
      
    }

}
</script>


<style lang="less" scoped>
@import "../../assets/fonts/font.css";
.all{
  #name{
    text-align: center;
    color: rgb(0, 94, 255);
    font-family: stliti;
    margin-bottom: 1rem;
    font-size: calc(100vw * 60 / 1920);
  }
  #userlogin{
    width: 80%;
    background-color: white;
    padding: 3rem 3rem 0 3rem;
    border-radius: 5px;
    #title{
      padding-left: 1rem;
    font-size: calc(100vw * 30 / 1920);
      border-left: 0.3rem skyblue solid;
      margin-bottom: 2rem;
      font-weight: bolder;
    }
    .input{
    font-size: calc(100vw * 20 / 1920);
    margin-bottom: 1rem;
      input{
        width: 100%;
        border: 1px solid skyblue;
        margin-top: 0.5rem;
        height: 1.5rem;
      }
    }
    #loginbtn{
      width: 100%;
      margin-top: 2rem;
      background: linear-gradient(to right, skyblue, blue);
      border: none;
    }
    #register{
    font-size: calc(100vw * 18 / 1920);
      text-align: right;
      padding: 2rem 0;
    }
}
}
@media screen and (max-width: 720px) {
.all{
  #name{
    width: 100%;
    margin-bottom: 1rem;
    font-size: calc(100vw * 100 / 1920) !important;
  }
  #userlogin{
  width: 80%;
  padding: 1rem;
}
.input{
  input{
    height: 1rem !important;
  }
}
#loginbtn{
  margin-top: 0.6rem !important;
}
#register{
    // font-size: calc(100vw * 18 / 1920);
      text-align: right;
      padding: 0.8rem 0 !important;
    }
}
}
</style>

